import React,{ useEffect, useState } from 'react';
import { Modal, Form, Input, Select } from 'antd';
import { FormInstance } from 'antd/lib/form';
import FirstOrgListComponent from '../../System/components/FirstOrgListComponent';
import GroupListComponent from '../../System/components/GroupListComponent';
import { DeviceListItem } from '../data';

interface CreateFormProps {
  modalVisible: boolean;
  onSubmit: (values: DeviceListItem) => void;
  onCancel: () => void;
  values:DeviceListItem;
}

// const { Option } = Select;

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

const formRef = React.createRef<FormInstance>();

const AddDevice: React.FC<CreateFormProps> = (props) => {
  const { modalVisible, onSubmit, onCancel, values } = props;
  const [form] = Form.useForm();
  const [disabled, handleDisabled] = useState<boolean>(true);//所属分组是否可用，根据上级机构
  const [orgId, setOrgId] = useState<number>(10000);//【所属机构】与【所属分组】联动

  const handleFinish = (values: { [key: string]: any }) => {
    if (onSubmit) {
      onSubmit(values as DeviceListItem);
    }
  };

  const handleUpdate = () => {
    if (!form) return;
    form.submit();
  };

  const modalFooter = { okText: '保存', onOk: handleUpdate, onCancel };

  useEffect(() => {
    if(modalVisible){
      if(values && values.id){
        form.setFieldsValue({
            "id":values.id,
            "name":values.name,
            "mac":values.mac,
            "orgId":values.orgId,
            "groupId":values.groupId,
        });
        handleDisabled(false);
      }else{
          form.resetFields();
          handleDisabled(true);
      }
    }
  },[modalVisible]);

  const renderContent = () => {
    return (
      <>
        <Form.Item name="id" style={{ display: 'none' }}></Form.Item>
        <Form.Item
          name="name"
          label="设备名称"
          rules={[{ required: true, max: 64, whitespace: true }]}
        >
          <Input placeholder="请输入设备名称" style={{ width: 200 }}/>
        </Form.Item>
        <Form.Item
          name="mac"
          label="MAC地址"
          rules={[{ required: true, max: 64, whitespace: true }]}
        >
          <Input placeholder="请输入MAC地址" style={{ width: 200 }}/>
        </Form.Item>
        <Form.Item
          name="orgId"
          label="所属机构"
          rules={[{ required: true }]}
        >
          <FirstOrgListComponent 
              disabled={false} 
              defaultvalue={values?values.orgId:null} 
              selectChange={(value) => {
                form.setFieldsValue({"orgId":value});
                setOrgId(value);
                handleDisabled(false);
              }}
              >
            </FirstOrgListComponent>
        </Form.Item>
        <Form.Item
          name="groupId"
          label="所属分组"
          rules={[{ required: true }]}
        >
          <GroupListComponent 
              defaultvalue={values?values.groupId:-1}
              disabled={disabled}
              orgId={orgId}
              selectChange={(value) => {
                form.setFieldsValue({"groupId":value});
              }}
            >
          </GroupListComponent>
        </Form.Item>
      </>
    );
  };

  return (
    <Modal
      destroyOnClose
      width={400}
      title={values&&values.id? "编辑设备":"添加设备"}
      visible={modalVisible}
      {...modalFooter}
    >
      <Form {...layout} ref={formRef} form={form} onFinish={handleFinish}>
        {renderContent()}
      </Form>
    </Modal>
  );
};

export default AddDevice;
